<template>  

    <!-- <el-row class="building_list" :gutter="20">  
     
        <el-card v-for="(item, index) in table" :key="index" class="card">  
          <img @click="$router.push(item.building_id+'/rooms')" class="pic" :src="imgUrl + item.building_image" alt="">  
          <div style="padding: 14px;">  
            <span>{{item.building_id}}号楼</span>  
          </div>  
        </el-card>  
      
    </el-row>   -->
    <div class="building_list_html">
      <h1>宿舍列表</h1>
<div class="building_list">
  <div  v-for="(item, index) in table" :key="index" class="card">  
    <div class="imgContainer">
    
      <img @click="$router.push(item.building_id+'/details')" class="pic" :src="imgUrl + item.building_image" alt=""> 
      <!-- <el-tag>标签一</el-tag> -->
    </div>
 
          <!-- <div style="padding: 14px;">   -->
            <h2>{{item.building_id}}号楼</h2>  
            <div class="tagContainer">
            
              <div class="tag">{{ item.room_struct }}</div>
              <div class="tag"><i v-for="i in item.building_gender" :key="i" :class="gender(i)"></i></div>
            </div>
            <div class="like">
              <img src="../assets/like.png" class="pic" alt="">
            </div>
        </div>  
</div>
    </div>
    
</template>  
  
<style scoped>  

.building_list_html h1{
  text-align: left;
  margin:2% 10%;
}
.building_list {  
  /* margin: auto; */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: auto;
  

  /* background-color: gray; */
  width: 100%;
  gap:10%
 
}  
.tag{
  margin: 4px;
  background-color: white;
  border-radius: 10%;
  padding: 2px;
  font-weight: bold;
}
.tagContainer{
  position: fixed;
  top:2%;
  left:2%
}


.like {
  position: fixed;
  top:20px;
  right:20px;
  /* background-color: red; */
  width: 10%;
  height: auto;
  opacity: 80%;
 
}
.like :hover {
  /* background-color: red;
  border-radius: 80%; */

  /* width: 8%; */

}



  
.card {  
  margin: 1%;
  /* height: 400px; */
  transform:translate(0,0)
  
}  


.imgContainer{
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 5%;

  /* background-color: blue; */
}

.pic {  
  width: 100%;
  height: 100%;
  border-radius:8%;
 
}  
</style>

<script>

import {getAllBuildings} from '@/api/dormitory'

export default {
  data() {
    return {
      table:[],
      currentDate: new Date(),
      imgUrl:"http://localhost:28080/",
      
    
    };
  },
  mounted (){
    getAllBuildings().then(res=>{
      this.table=res.data
    
    })
  },
  methods:{
    gender(value){
      // console.log(value)
      // console.log(genderDict)
      
        if (value === 0) {  
          
          return "el-icon-female";   
           
        }    
        else return "el-icon-male"
    }  
  }
 
}
</script> 


  

